<!-- 
该组件是表格组件的头部区域 
主要用到的props有:
showTop：是否显示顶部区域 类型：布尔值
showBottom：是否显示底部区域 类型：布尔值
columns：存放一个对象数组，每个对象中存放着表头名name,与显示与否show 类型：数组
layout：字符串 决定着表格顶部右边功能按钮的显示隐藏 类型：字符串
-->
<template>
  <div class="table-bar">
    <!-- 顶部区域 -->
    <div class="top-wrap" v-show="showSearchWrap">
      <slot name="top"></slot>
    </div>
    <!-- 底部区域 -->
    <div class="bottom-wrap" v-if="showBottom">
      <div class="left-wrap">
        <slot name="bottom"></slot>
      </div>
      <!-- 右边功能按钮 -->
      <div class="right-wrap">
        <el-button-group>
          <!-- 跳转到文件类型管理 -->
          <el-tooltip
            class="item"
            effect="dark"
            content="管理类型"
            placement="top"
          >
            <el-button icon="el-icon-right" size="small" @click="$router.push('FileManage')"></el-button>
          </el-tooltip>
          <!-- 搜素按钮 -->
          <el-button
            icon="el-icon-search"
            @click="isShowSearchWrap()"
            size="small"
            v-if="layout.indexOf('search') !== -1"
          />
          <!-- 重置按钮 -->
          <el-button
            icon="el-icon-refresh-right"
            @click="refresh()"
            size="small"
            v-if="layout.indexOf('refresh') !== -1"
          />
          <!-- 下拉菜单 选择要显示的表头内容 -->
          <el-popover
            placement="bottom-end"
            width="150"
            trigger="hover"
            @show="showPopover"
            v-if="layout.indexOf('column') !== -1"
          >
            <el-checkbox-group v-model="colSelected" :min="1">
              <el-checkbox
                v-for="(item, index) in colOptions"
                :label="item"
                :key="item"
                @change="changeColumn($event, index)"
              />
            </el-checkbox-group>
            <el-button
              size="small"
              slot="reference"
              icon="el-icon-s-operation"
            />
          </el-popover>
        </el-button-group>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TableBar",
  inject: ["reload"],
  props: {
    // 是否显示顶部区域
    showTop: {
      type: Boolean,
      default: false,
    },
    // 是否显示底部区域
    showBottom: {
      type: Boolean,
      default: true,
    },
    // 存放表头的内容的数组 数组里是对象 对象里存放的每一项表头名称和show（显示与否）
    columns: {
      type: Array,
      default: () => [],
    },
    // 右边功能按钮的显示，默认是三个都显示
    layout: {
      type: String,
      default: "search, refresh, column",
    },
  },
  data() {
    return {
      showSearchWrap: true, // 存放父组件传值--showTop
      colOptions: [],
      colSelected: [],
      columnChage: false,
    };
  },
  mounted() {
    this.showSearchWrap = this.showTop;
  },
  methods: {
    // 刷新页面
    refresh() {
      this.reload();
    },
    // 是否显示搜素区域
    isShowSearchWrap() {
      this.showSearchWrap = !this.showSearchWrap;
      if (!this.showSearchWrap) this.$emit("closed");
    },
    // 列的显示隐藏
    showPopover() {
      if (!this.columnChage) {
        this.columns.map((item) => {
          this.colOptions.push(item.name);
        });
        this.colSelected = this.columns.map((item) => {
          if (item.show) {
            return item.name;
          }
        });
        this.columnChage = true;
      }
    },
    // 选择列
    changeColumn(show, index) {
      let columns = this.columns;
      columns.map((item, i) => {
        if (index === i) {
          item.show = show;
        }
      });
      // 调用父组件方法 并传递columns 父组件要有一个方法changeColumn来接收
      this.$emit("changeColumn", columns);
    },
  },
};
</script>

<style lang="scss" scoped>
.table-bar {
  padding-bottom: 15px;

  .top-wrap {
    transition: height 0.3s;
  }

  .bottom-wrap {
    display: flex;
    justify-content: space-between;
    height: 32px;
  }
}
</style>